<template>
  <div class="box">
    <van-cell class="poster-bg">
      <template #title>
        <div class="top">
          <van-image
            width="63"
            height="63"
            src="http://img.mobiletrain.org/templates/mobiletrain/images/mo/index/right-fixed-face.png"
          />
          <div v-if="token != ''">{{ nickname }}</div>
          <div v-else @click="$router.push('/login')">立即登录</div>
        </div>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <div class="like-fav">
          <div>
            <van-icon name="like-o" />
            <div>点赞</div>
          </div>
          <div>
            <van-icon name="star-o" />
            <div>收藏</div>
          </div>
        </div>
      </template>
    </van-cell>
    <!-- 分割线 -->
    <!-- <van-divider /> -->

    <div class="settings">
      <van-cell to="/profile" is-link>
        <template #title>
          <i class="iconfont icon-yingyuan"></i>
          <span class="custom-title">个人设置</span>
        </template>
      </van-cell>
      <van-cell class="logout" @click="logout" v-if="token != ''">
        <template #title>
          <span class="custom-title">用户退出</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    token() {
      return this.$store.getters.token
    },
    nickname() {
      return this.$store.getters.nickname
    },
  },
  methods: {
    logout() {
      console.log('用户退出')
      this.$dialog
        .confirm({
          title: '退出登录确认',
          message: '您退出后就只能查看电影信息不能操作',
          confirmButtonText: '残忍离开',
          cancelButtonText: '再想一下',
        })
        .then(() => {
          // 点击确认退出
          // 清空sessionStorage中的数据
          // 清空vuex中的数据  mutations它是一个同步操作
          this.$store.commit('logout')
          // 清空完毕后，跳转到首页
          this.$router.push('/films/nowplaying')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  background: #f4f4f4;
  height: 100vh;
}
.poster-bg {
  padding: 0;
}
.settings {
  margin-top: 10px;
}
.custom-title {
  margin-left: 10px;
}
.logout {
  color: #ff5f16;
  > div {
    text-align: center;
  }
}
.top {
  height: 200px;
  display: flex;
  align-items: center;
  background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
  background-size: cover;
  div {
    margin-left: 10px;
    color: #fff;
    font-size: 16px;
  }
}
.like-fav {
  display: flex;
  justify-content: space-between;
  padding: 10px 60px;
  div {
    display: flex;
    width: 50px;
    flex-direction: column;
    justify-content: center;
    i {
      text-align: center;
      font-size: 20px;
    }
    div {
      text-align: center;
    }
  }
}
</style>